<template>
  <view class="personal-center">
    <!-- 个人信息模块 -->
    <view class="user-info">
      <image class="avatar" src="https://example.com/avatar.jpg" alt="头像" />
      <text class="user-name">张三</text>
      <text class="user-status">VIP会员</text>
    </view>

    <!-- 统计信息 -->
    <view class="stats">
      <view class="stat-item">
        <text class="stat-title">已预约服务</text>
        <text class="stat-value">12</text>
      </view>
      <view class="stat-item">
        <text class="stat-title">待评价服务</text>
        <text class="stat-value">3</text>
      </view>
      <view class="stat-item">
        <text class="stat-title">账户余额</text>
        <text class="stat-value">¥200</text>
      </view>
    </view>

    <!-- 我的服务记录 -->
    <view class="service-record">
      <text class="section-title">我的服务记录</text>
      <view class="record-list">
        <view class="record-item">
          <text class="service-name">日常保洁</text>
          <text class="service-status">已完成</text>
        </view>
        <view class="record-item">
          <text class="service-name">保姆月嫂</text>
          <text class="service-status">待评价</text>
        </view>
        <view class="record-item">
          <text class="service-name">家具维修</text>
          <text class="service-status">已完成</text>
        </view>
      </view>
    </view>

    <!-- 设置模块 -->
    <view class="settings">
      <text class="section-title">设置</text>
      <view class="setting-item">
        <text class="setting-name">修改个人信息</text>
        <image class="icon" src="https://example.com/icon-edit.png" />
      </view>
      <view class="setting-item">
        <text class="setting-name">账号安全</text>
        <image class="icon" src="https://example.com/icon-lock.png" />
      </view>
      <view class="setting-item">
        <text class="setting-name">联系客服</text>
        <image class="icon" src="https://example.com/icon-phone.png" />
      </view>
    </view>
  </view>
</template>

<script setup>
// 你可以在这里添加 JavaScript 或 Vue 的逻辑代码
</script>

<style scoped lang="scss">
.personal-center {
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.user-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.user-status {
  font-size: 14px;
  color: #666;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-title {
  font-size: 14px;
  color: #888;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #2d9cdb;
}

.service-record {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.record-list {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.service-name {
  font-size: 14px;
  color: #333;
}

.service-status {
  font-size: 14px;
  color: #2d9cdb;
}

.settings {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.setting-name {
  font-size: 14px;
  color: #333;
}

.icon {
  width: 20px;
  height: 20px;
}
</style>

